<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import FlowDetail from '@/pages/contract/components/flowDetail.vue'
import commonModel from '@/http/modules/common.js'
import { List } from 'vant'
const route = useRoute()
const contractDetail = ref({})
const loading = ref(false)
const finished = ref(false)
const flowList = ref([])
const page = ref(1)
async function getFlowList() {
  loading.value = true
  finished.value = false
  commonModel
    .gatewayApi({
      service: 'cb_trade_incoming_page',
      bizContent: {
        contractOrderNo: route.params.id,
        pageNo: page.value,
        pageSize: 10,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        if (result.dataList && result.dataList.length) {
          if (page.value === 1) {
            flowList.value = result.dataList
          } else {
            flowList.value = flowList.value.concat(result.dataList)
          }
          if (flowList.value.length >= result.totalCount) {
            finished.value = true
          }
          loading.value = false
        } else {
          finished.value = true
          loading.value = false
        }
      }
    })
}
function onLoad() {
  page.value++
  // getFlowList()
}
function getContractDetail() {
  commonModel
    .gatewayApi({
      service: 'cb_trade_contract_detail',
      bizContent: {
        contractOrderNo: route.params.id,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        contractDetail.value = result
         // 已关联入款流水 展示更换接口来源
         if (result.recordList && result.recordList.totalCount > 2) {
            hasMore.value = true
            flowList.value = result.recordList.slice(0, 2)
          } else {
            flowList.value = result.recordList || []
          }
      }
    })
}
onMounted(() => {
  getFlowList()
  getContractDetail()
})
</script>

<template>
  <div class="transaction__history">
    <div class="contract__id">
      {{ `合同编号: ${contractDetail.contractOrderNo}` }}
    </div>
    <List
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="transaction__history-con">
        <flow-detail
          :flowList="flowList"
          v-if="contractDetail.contractOrderNo"
          is-detail
          :contract-detail="contractDetail"
        />
      </div>
    </List>
  </div>
</template>

<style lang="scss" scoped>
.contract__id {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 500;
  color: #222222;
}
.transaction__history-con {
  padding: 0 12px;
  margin-top: 10px;
}
</style>
